import React from 'react'
// npm i lodash or yarn add lodash
class App extends React.Component {
    // 搜索,当用户停止输入的时候我才执行axios请求
    state = {
        value: ''
    }
    changeInput = ({ target }) => {
        this.setState({
            value: target.value
        })
        // console.log(target.value)
    }
    time = null;
    search = (value) => {
        console.log(value)
        //每输入一个字就请求,性能浪费了
        //防抖:当用户结束交互后等待一秒再去执行,如果一秒内用户不间断的交互,我们就无限延时
        //0.清除定时器
        if (this.time) {
            clearTimeout(this.time)
        }
        //1.先开启定时器
        this.time = setTimeout(() => {
        //2.定时器里判断定时器的值如果没有了,旧请求
            console.log('请求接口：' + value)
        }, 1000)
    }
    render() {
        const { value } = this.state
        return <div>
            <input type="text" value={value} onChange={this.changeInput} onKeyUp={() => this.search(value)} />
        </div>
    }
}

export default App;